<template>
  <div class="login">
    <x-header style="background-color:#000;">登录
      <router-link to="/register" slot="right">注册</router-link>
      <!-- <a slot="right">注册</a> -->
    </x-header>
    <h4>登录</h4>
    <div class="input">
      <!-- <form action="/myp/user/login" id="myForm" method="post">  -->
       <!-- @submit.prevent="submitt()" -->
        <input type="text" placeholder="请输入用户名" v-model="username" name="username">
        <input type="password" placeholder="请输入密码" v-model="password" name="password">
        <!-- <input type="submit" value="登录"> -->
      <!-- </form> -->
      <p class="error">{{errorMsg}}</p>
      <button class="bg-orange" @click="submit()">登录</button>
      
    </div>
  </div>
</template>
<script>
import {XHeader} from 'vux'
import userApi from '../api/user.js'
export default {
  components:{
    XHeader
  },
  methods:{
    submitt(){
      console.log('submitt')
    },
    submit(){
      // userApi.getUserInfo()
      if (this.username==='' || this.password==="") {
        this.errorMsg="用户名或密码不能为空";
      }
      else{
        let test=JSON.stringify({"email":this.username,"pw":this.password})
        console.log(test)
        userApi.loginQs((res)=>{
          console.log(res)
          this.myInfo.username=res.data.email;
          this.myInfo.password=res.data.pw;

          let userInfo={username:this.username,password:this.password}
          sessionStorage.setItem('userInfo',JSON.stringify(userInfo));    
          this.$router.push({path:'/home'})
        },(err)=>{
          this.errorMsg ="用户名或密码错误";
        },test) //username:this.username,password:this.password
      }
    }
  },
  data(){
    return {
      username:"",
      password:"",
      errorMsg:"",
      myInfo:
        {
          username:"",
          password:""
        }
    }
  }
}
</script>
<style lang="less" scoped>
  .login{
    h4{
      text-align: center;
      margin: 10vw auto 15vw;
    }
    .input{
      width: 90%;
      margin: 0 auto;
      .error{
        color: red;
      }
      input{
        width: calc(100% - 3vw);
        height: 11vw;
        border: 1px solid #e6e6e6;
        border-radius: 1vw;
        color: #666;
        margin-bottom: 5vw;
        padding-left: 3vw;
      }
      button{
        width: 100%;
        height: 11vw;
        color: #fff;
        border: 0;
        border-radius: 1vw;
        margin-top: 5vw;
      }
    }
  }
</style>